<template>
    <div class="container">
        <div class="header">
            <div v-for="(tabTitle,index) in tabs" @click="switchTab(index)"
                 :class="['head-tab',indexTab == index && 'active',index == 0 && 'left-radius',index == (tabs.length-1) && 'right-radius']">
                <text :class="['text-notmal',indexTab == index && 'active']">{{tabTitle}}</text>
            </div>
        </div>


        <div class="line"></div>

        <scroller>
            <div v-if="indexTab == 0" :class="['content-area']">
                <div v-for="item in infoArr" class="cell cell-top-border cell-bottom-border">
                    <text class="cell-label text-notmal">{{item.title}}</text>
                    <text class="cell-input text-minor">{{item.value}}</text>
                </div>
            </div>
            <div v-if="indexTab == 1" :class="['content-area']">
                <div v-for="item in buyerMoreInfoArr" class="cell cell-top-border cell-bottom-border">
                    <text class="cell-label text-notmal">{{item.title}}</text>
                    <text v-if="!isModify" class="cell-input text-minor">{{item.value}}</text>
                    <input v-if="isModify" :value="item.value" :data-index="item.name" @input="inputVal"
                           class="cell-input text-minor" style="height: 80px;text-align: left;"/>
                    <div @click="sumitBuyerInfo"
                         :class="['info-modify-btn',(!isShow || indexTab != 1) && 'hidden-area']">
                        <text style="font-size:36px;color: white;">{{isModify ? '保存修改' : '修改'}}</text>
                    </div>
                </div>
            </div>
        </scroller>

    </div>
</template>

<!--全局通用样式-->
<style>

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }


</style>
<style scoped>


    .info-modify-btn {
        position: fixed;
        bottom: 0;
        height: 80px;
        width: 750px;
        background-color: #01a65a;
        justify-content: center;
        align-items: center;
    }

    .line {
        height: 20px;
        background-color: #f2f3f4;
    }

    .content-area {
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }

    .hidden-area {
        height: 0px;
        width: 0px;
    }

    .cell-input {
        width: 450px;
        text-align: right;
        padding-right: 15px;
    }

    .cell-label {
        width: 300px;
        padding-left: 15px;
    }

    .cell {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 80px;
    }

    .container {

    }

    .header {
        height: 60px;
        width: 750px;
        flex-direction: row;
        padding-left: 15px;
        padding-right: 15px;
        justify-content: center;
        align-items: center;
        background-color: #f2f3f4;
    }

    .head-tab {
        width: 250px;
        text-align: center;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: #01A65A;
        border-bottom-color: #01A65A;
        height: 60px;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .right-radius {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border-right-width: 1px;
        border-right-color: #01A65A;
    }

    .left-radius {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-left-width: 1px;
        border-left-color: #01A65A;
    }

    .active {
        background-color: #01A65A;
        color: white;
    }

</style>
<script>
    import nw from '../network/nw.js'

    export default {
        components: {},
        props: {
            userType: {
                type: String,
                default: 'supper'
            },
            userId:{
              type:Number
            },
            isShow:{
                type:Boolean,
                default:false
            }
        },
        data: () => ({
            indexTab: 0,
            tabs: ['机构名称', '调查资料'],
            buyerInfoMap: {
                'org_name': {
                    title: '机构名称'
                },
                'org_type': {
                    title: '用户类型',
                    fn: function (data) {
                        switch (data.org_type) {
                            case 1:
                                return '医院'
                            case 2:
                                return '诊所'
                            case 3:
                                return '药店'
                            case 4:
                                return '经销商'
                            case 5:
                                return '集团'
                            case 6:
                                return '个人'
                        }
                    }
                },
                'provinceName': {
                    title: '省份城市',
                    fn: function (data) {
                        return data.provinceName + ' ' + data.cityName
                    }
                },
                'status': {
                    title: '状态',
                    fn: function (data) {
                        switch (data.status) {
                            case 1400:
                                return '未注册'
                            case 1000:
                                return '已注册'
                            case 1200:
                                return '已认证'
                            case 1100:
                                return '已退出'
                            case 1500:
                                return '已删除'
                        }
                    }
                },
                'groupName': {
                    title: '所属集团'
                },
                'linkman': {
                    title: '联系人'
                },
                'linkman_mobile': {
                    title: '联系人电话'
                },
                'is_strategic': {
                    title: '是否战略合作',
                    fn: (data) => {
                        if (data.is_strategic == '1000') {
                            return '是'
                        } else {
                            return '否'
                        }
                    }
                },
                'certLevel': {
                    title: '证件完成度'
                },
                'custProName': {
                    title: '客服负责人'
                },
                'opertionProName': {
                    title: '支撑负责人'
                },
                'sysBDName': {
                    title: 'BD负责人'
                }
            },//采购商资料
            supperInfoMap: {
                "org_name": {
                    title: "机构名称"
                },
                "org_type": {
                    title: "机构类型",
                    fn: (data) => {
                        switch (data.org_type) {
                            case '7':
                                return '药械生产厂家'
                            case '8':
                                return '药械经销商'
                            case '9':
                                return '原料供应商'
                            case '10':
                                return '服务供应商'
                            case '11':
                                return '配送企业'
                            case '12':
                                return '金融机构'
                            case '13':
                                return '其他产品'
                        }
                    }
                },
                "provinceName": {
                    title: "省份城市",
                    fn: (data) => {
                        return data.provinceName + ' ' + data.cityName
                    }
                },
                'status': {
                    title: '状态',
                    sort: 3,
                    fn: function (data) {
                        switch (data.status) {
                            case 1400:
                                return '未注册'
                            case 1000:
                                return '已注册'
                            case 1200:
                                return '已认证'
                            case 1100:
                                return '已退出'
                            case 1500:
                                return '已删除'
                        }
                    }
                },
                "supper_type": {
                    title: "主营类型",
                    fn: (data) => {
                        switch (data.supper_type) {
                            case '1000':
                                return '药品'
                            case '1100':
                                return '医药设备'
                            case '1200':
                                return '耗材/试剂'
                            case '1300':
                                return '保健食品'
                            case '1400':
                                return '化妆品'
                            case '1500':
                                return '其他'
                        }
                    }
                },
                "linkman": {
                    title: "联系人"
                },
                "linkman_mobile": {
                    title: "联系人电话"
                },
                "period_days": {
                    title: "平台账期"
                },
                "hospital": {
                    title: "推荐医院"
                },
                "is_strategic": {
                    title: "是否战略合作",
                    fn: (data) => {
                        switch (data.is_strategic) {
                            case '1000':
                                return '是'
                            case '1100':
                                return '否'
                        }
                    }
                },
                "certLevel": {
                    title: "证件完成度"
                },
                "custProName": {
                    title: "客户负责人"
                },
                "opertionProName": {
                    title: "支撑负责人"
                },
                "sysBDName": {
                    title: "BD负责人"
                },
                "remark": {
                    title: "备注"
                }
            },//供应商信息
            buyerMoreInfoMap: {
                "medicalNumber": "医疗机构执业许可证号",
                "hospitalLevel": "医院等级",
                "totalInvestment": "总投资",
                "totalAssets": "固定资产总额",
                "hospitalArea": "医院面积",
                "housingEstates": "房产",
                "dean": "院长",
                "mainSection": "主营科室",
                "mainNumber": "主治以上人数",
                "doctorNumber": "医师人数",
                "nursersNumber": "护士人数",
                "dayOutpatient": "日访问量",
                "dayOperation": "日手术量",
                "dayHospital": "日住院量",
                "dayBussiness": "日营业额",
                "bedNumber": "床位数量",
                "monthBuy": "月采购量",
                "mainEquipment": "主要设备",
                "controlPerson": "实际控制人",
                "controlPersonPhone": "控制人电话",
            },//采购商尽调资料
            infoArr: [],//采购商或供应商信息
            buyerMoreInfoArr: [],//采购商尽调资料
            buyerMoreInfo: {},//进店
            isModify: false//是否修改尽调资料
        }),

        created() {
            if(this.userType == 'buyer') {
                this.loadUserBuyerInfo(this.userId)
                this.loadBuyerMoreInfo(this.userId)
            }else{
                this.loadUserSupperInfo(this.userId)
            }
        },
        methods: {
            //切换
            switchTab(index) {
                this.indexTab = index
            },

            //采购商信息
            loadUserBuyerInfo(userId) {
                var self = this
                nw.postDefine('/app/userBuyer/info', {
//                    data: {userBuyerId: 2970},
                    data: {userBuyerId: userId},
                    success(res) {
                        var arr = []
                        for (let i in self.buyerInfoMap) {
                            var ele = self.buyerInfoMap[i]
                            var newData = {title: ele.title}
                            if (ele.fn) {
                                newData.value = ele.fn(res)
                            } else {
                                newData.value = res[i]
                            }
                            arr.push(newData)
                        }

                        self.infoArr = arr
                    }
                })
            },

            //供应商信息
            loadUserSupperInfo(userId) {
                var self = this
                nw.postDefine('/app/userSupplier/info', {
                    data: {"userSupperId": userId},
//                    data: {"userSupperId": 175},
                    success(res) {
                        var arr = []
                        for (let i in self.supperInfoMap) {
                            var ele = self.supperInfoMap[i]
                            var obj = {title: ele.title}
                            if (ele.fn) {
                                obj.value = ele.fn(res)
                            } else {
                                obj.value = res[i]
                            }

                            arr.push(obj)
                        }

                        self.infoArr = arr
                    }
                })
            },

            //采购商资料
            loadBuyerMoreInfo(userId) {
                var self = this
                nw.postDefine('/app/userBuyer/detailInfoBack', {
//                    data: {userBuyerId: 2970},
                    data: {userBuyerId: userId},
                    success(res) {
                        self.drawUserInfo(res)
                        self.buyerMoreInfo = res
                    }
                })
            },

            //重新渲染尽调资料
            drawUserInfo(data) {
                var arr = []
                for (let i in this.buyerMoreInfoMap) {
                    var ele = this.buyerMoreInfoMap[i]
                    var newData = {title: ele, name: i}
                    newData.value = data[i]
                    arr.push(newData)
                }

                this.buyerMoreInfoArr = arr
            },
            //input输入事件
            inputVal(e) {
                var index = e.target.attr.dataIndex
                this.buyerMoreInfo[index] = e.value
            },
            //提交资料
            sumitBuyerInfo() {
                var self = this

                if (self.isModify) {
                    nw.postDefine('/app/userBuyer/saveOrUpdateDetailInfo', {
                        data: self.buyerMoreInfo,
                        success(res) {
                            self.isModify = !self.isModify
                            self.drawUserInfo(self.buyerMoreInfo)
                        }
                    })
                } else {
                    self.isModify = !self.isModify
                }
            }
        }
    };
</script>